<script lang="ts" setup>
import { createPostMain, getPostsMains, type postForm, type postMainForm } from '@/api/post';
import { usePostStore } from '@/stores/post';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import moment from 'moment';
import { useStudentStore } from '@/stores/student';
import { ElMessage } from 'element-plus';
const props = defineProps(["postId"])
const thisPost = ref<postForm>({})
const postList = usePostStore().posts
const getPostList = async () => {
    for (let i = 0; i < postList.length; i++) {
        if (postList[i].id == props.postId) {
            thisPost.value = postList[i];
            break;
        }
    }
    console.log("thisPost", thisPost.value);
}
const postMain = ref<postMainForm[]>([])
const getAllPostMains = async () => {
    let res = await getPostsMains(props.postId)
    postMain.value = res.data
    console.log("postMain: ", postMain.value);
    postMain.value.forEach(item => {
        item.formatDate = moment(item.postTime).format("YYYY-MM-DD HH:mm:ss");
    });

}
const router = useRouter();
const back = () => {
    router.push({
        name: 'discusion',
        // query: {
        //     cid: props.cid
        // }
    })
}
const newPostMain = ref<postMainForm>({
    postId: props.postId,
    avatar: useStudentStore().studentInfo.avatar,
    studentUsername: useStudentStore().studentInfo.username
})
// 发表
const submitPost = async () => {
    newPostMain.value.postTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
    console.log(newPostMain.value);
    let res = await createPostMain(newPostMain.value);
    ElMessage.success(res.data);
    window.location.reload();

}
onMounted(() => {
    getPostList();
    getAllPostMains();
})
</script>
<template>
    <div class="main">
        <el-page-header class="page-head" @click="back">
            <template #content>
                <div>
                    <el-avatar :size="32" class="mr-3" :src="thisPost.studentAvatar" />
                    <span style="color: var(--el-text-color-regular) ;margin-left: 10px;">
                        {{ thisPost.title }}
                    </span>
                    <el-tag style="margin-left: 20px;">{{ thisPost.tagName }}</el-tag>
                </div>
            </template>
            <template #extra>
                <div>
                    <span>楼主：</span>
                    <span>{{ thisPost.studentUserName }}</span>
                </div>
            </template>
        </el-page-header>
        <div class="content">
            <el-scrollbar style="height:65vh">
                <el-card class="card">
                    <el-row type="flex" justify="start">
                        <el-col :span="6">
                            <img :src="thisPost.studentAvatar" class="avatar">
                        </el-col>
                        <el-col :span="18">
                            <p class="username">{{ thisPost.studentUserName }}</p>
                            <!-- 使用 v-html 渲染带有 HTML 标签的内容 -->
                            <div v-html="thisPost.content" class="font-size"></div>
                            <p class="post-time">{{ thisPost.formatDate }}</p>
                        </el-col>
                    </el-row>
                </el-card>
                <template v-for="item in postMain" :key="item.id">
                    <el-card class="card">
                        <el-row type="flex" justify="start">
                            <el-col :span="6">
                                <img :src="item.avatar" class="avatar">
                            </el-col>
                            <el-col :span="18">
                                <p class="username">{{ item.studentUsername }}</p>
                                <p class="content">{{ item.content }}</p>
                                <p class="post-time">{{ item.formatDate }}</p>
                            </el-col>
                        </el-row>
                    </el-card>
                </template>
            </el-scrollbar>
            <!-- <div style="margin-top: 20px;width: 70%;"> -->
            <el-form style="margin-top: 20px; display: flex; align-items: center;width: 100%;">
                <el-form-item label="回复" style="flex: 1; margin-right: 10px;">
                    <el-input v-model="newPostMain.content" type="textarea" />
                </el-form-item>
                <el-button type="primary" @click="submitPost">发表</el-button>
            </el-form>
            <!-- </div> -->
        </div>
    </div>
</template>

<style scoped>
.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.content {
    width: 70%;
    background-color: #fff;

    .card {
        min-height: 200px;

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }

        .username {
            font-weight: bold;
        }

        .content {
            margin-bottom: 5px;
        }

        .post-time {
            color: #666;
            font-size: 12px;
            float: right;
        }
    }

}

.page-head {
    width: 70%;
    background-color: #fff;
    padding: 1vh 20px;
    height: 8vh;
}
</style>
